<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/jquery.js"></script>
    <script src="./js/shim.min.js"></script>
    <script src="./js/xlsx.core.min.js"></script>
    <script src="./js/moment.js"></script>
    <script src="./js/brcode.min.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
    <style   media="print">   
        .Noprint   {   DISPLAY:   none;}   
        .PageNext   {   PAGE-BREAK-AFTER:   always   }   
    </style>
    <title>Document</title>
</head>
<body>
    <div class="Noprint">
        <input type="file" id="excel" style="display: none"/>
        <button id="importExcel">导入文件</button>
    </div>
    <div id="toPrint"></div>
    <script>
    $(function(){

        $("#importExcel").click(function(){
            $("#excel").click();
        })

        function splicArr(arr,num){
            var len = arr.length;
            var returnArr = [];
            for(var i=0;i<len;i+=num){
                if (arr.length<num) continue
                returnArr.push(arr.splice(0,num))
            }
            if(arr.length>0) returnArr.push(arr);
            return returnArr;
        }

        function handleFile(e) {
            var files = e.target.files, f = files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = new Uint8Array(e.target.result);
                var workbook = XLSX.read(data, {type: 'array'});
                // sheet1的名称
                var sheetName = workbook.SheetNames[0];
                var sheetContent = workbook.Sheets[sheetName];
                var data = XLSX.utils.sheet_to_json(sheetContent);
                var spliteArr = splicArr(data,8);
                showPage(spliteArr);
            };
            reader.readAsArrayBuffer(f);
        }
        $("#excel")[0].addEventListener('change', handleFile, false);

        function showPage(arr){
            arr.forEach(item=>{
                var tablestr = "";
                item.forEach(str=>{
                    tablestr+=`
                        <div class="table">
                            <table>
                                <tr><td colspan="2">${str["机型"]}</td></tr>
                                <tr  style="border-bottom:3px solid black;">
                                    <td class="t-title">SO:</td>
                                    <td class="t-content" style="font-weight: bold;margging-left:-5mm !important;">${str["SO"]}</td>
                                </tr>
                                <tr><td colspan="2"><img class="qrcodeimg" name="${str["Item"]}"/></td></tr>
                                <tr>
                                    <td class="t-title">Item:</td>
                                    <td class="t-content" style="font-weight: bold;">${str["Item"]}</td>
                                </tr>
                                <tr>
                                    <td class="t-title">Old Item:</td>
                                    <td class="t-content">${str["Old Item"]}</td>
                                </tr>
                                <tr>
                                    <td class="t-title">Qty:</td>
                                    <td class="t-content">${str["Qty"]}</td>
                                </tr>
                                <tr>
                                    <td class="t-title">Desc:</td>
                                    <td class="t-content">${str["Desc"]}</td>
                                </tr>
                                <tr>
                                    <td class="t-title">JCI WUXI</td>
                                    <td class="t-content" style="text-align:center">${moment().format("YYYY-MM-DD")}</td>
                                </tr>
                            </table>
                        </div>
                    `;
                })
                $("#toPrint").append(`
                    <div class="page" >
                        <div class="pageTable">${tablestr}</div>
                    </div>
                `);
                // 生成一维码
                $(".qrcodeimg").JsBarcode()
                let qrarr = $(".qrcodeimg");
                let qrarrlen = qrarr.length;
                for(var qr=0;qr<qrarrlen;qr++){
                    let qrimg = qrarr[qr];
                    $(qrimg).JsBarcode($(qrimg).attr("name"),{
                        // format: "CODE39",//选择要使用的条形码类型
                        // width:3,//设置条之间的宽度
                        height:20,//高度
                        displayValue:false,//是否在条形码下方显示文字
                        text:"456",//覆盖显示的文本
                        // fontOptions:"bold",//使文字加粗体或变斜体 "bold italic"
                        // font:"fantasy",//设置文本的字体
                        // textAlign:"left",//设置文本的水平对齐方式
                        // textPosition:"top",//设置文本的垂直位置
                        textMargin:0,//设置条形码和文本之间的间距
                        // fontSize:15,//设置文本的大小
                        // background:"#eee",//设置条形码的背景
                        // lineColor:"#2196f3",//设置条和文本的颜色。
                        // margin:15//设置条形码周围的空白边距
                    });
                }
            })
            
        }
    })
    </script>
</body>
</html>